<template>
  <!-- 项目列表头部 -->
  <div class="menu-comp">
    <div class="logo" @click="$router.push('/')"></div>
    <main>
      <el-menu
        class="menu-comp-container left"
        mode="horizontal"
        :default-active="activeIndex"
        @select="handleSelect"
      >
        <template v-for="item in menuLeftList">
          <template v-if="!item.hide">
            <el-submenu
              v-if="item.children && item.children.length"
              popper-class="menu-popper-custom"
              :key="item.id"
              :index="item.path || item.id"
            >
              <template slot="title">
                <!--                <i v-if="item.icon" :class="['iconfont', item.icon]">{{ setIcon(item.icon) }}</i>-->
                <span slot="title">{{ item.name }}</span>
              </template>
              <template v-for="child in item.children">
                <el-submenu
                  v-if="child.children && child.children.length"
                  popper-class="menu-popper-custom"
                  :index="child.path || child.id"
                  :key="child.id"
                >
                  <template slot="title">
                    <!--                    <i v-if="item.icon" :class="['iconfont', item.icon]">{{ setIcon(item.icon) }}</i>-->
                    <span slot="title">{{ item.name }}</span>
                  </template>
                  <el-menu-item
                    v-for="value in child.children"
                    :index="value.path || value.id"
                    :key="value.id"
                  >
                    {{ value.name }}
                  </el-menu-item>
                </el-submenu>
                <el-menu-item
                  v-else
                  :index="child.path || child.id"
                  :key="child.id"
                >
                  {{ child.name }}
                </el-menu-item>
              </template>
            </el-submenu>
            <el-menu-item v-else :index="item.path || item.id" :key="item.id">
              {{ item.name }}
            </el-menu-item>
          </template>
        </template>
      </el-menu>
      <div class="project-title" @click="handleSelect('/project')">
        <!--              <el-canvas-->
        <!--                class="project-title_left"-->
        <!--                :width="550"-->
        <!--                :height="50"-->
        <!--                :initFn="handleInit">-->
        <!--              </el-canvas>-->
        <span :class="['text', activeIndex === '/project' ? 'active' : '']">
          {{ projectName }}
        </span>
        <span class="bg"></span>
      </div>
      <el-menu
        class="menu-comp-container right"
        mode="horizontal"
        :default-active="activeIndex"
        @select="handleSelect"
      >
        <template v-for="item in menuRightList">
          <template v-if="!item.hide">
            <el-submenu
              v-if="item.children && item.children.length"
              popper-class="menu-popper-custom"
              :key="item.id"
              :index="item.path || item.id"
            >
              <template slot="title">
                <!--                <i v-if="item.icon" :class="['iconfont', item.icon]">{{ setIcon(item.icon) }}</i>-->
                <span slot="title">{{ item.name }}</span>
              </template>
              <template v-for="child in item.children">
                <el-submenu
                  v-if="child.children && child.children.length"
                  popper-class="menu-popper-custom"
                  :index="child.path || child.id"
                  :key="child.id"
                >
                  <template slot="title">
                    <!--                    <i v-if="item.icon" :class="['iconfont', item.icon]">{{ setIcon(item.icon) }}</i>-->
                    <span slot="title">{{ item.name }}</span>
                  </template>
                  <el-menu-item
                    v-for="value in child.children"
                    :index="value.path || value.id"
                    :key="value.id"
                  >
                    {{ value.name }}
                  </el-menu-item>
                </el-submenu>
                <el-menu-item
                  v-else
                  :index="child.path || child.id"
                  :key="child.id"
                >
                  {{ child.name }}
                </el-menu-item>
              </template>
            </el-submenu>
            <el-menu-item v-else :index="item.path || item.id" :key="item.id">
              {{ item.name }}
            </el-menu-item>
          </template>
        </template>
      </el-menu>
    </main>
    <div class="user-info">
      <div class="message" @click="$router.push('/message/manage')">
        <i class="iconfont iconxiaoxi" title="消息中心">
          <span v-if="count">{{ count > 99 ? "99+" : count }}</span>
        </i>
      </div>
      <div class="user-item" @click="$router.push('/')" title="门户">
        <i class="iconfont iconmenhu"></i>
      </div>
      <div class="user-item">
        <i class="iconfont iconyonghu"></i>
        <span class="user-name" :title="userName">{{ userName }}</span>
      </div>
      <el-dropdown @command="handleCommand">
        <div class="user-item">
          <span>个人档案</span>
        </div>
        <el-dropdown-menu slot="dropdown">
          <!--          <el-dropdown-item command="setUserInfo">-->
          <!--            <i class="iconfont icongerenxinxi"></i>个人信息-->
          <!--          </el-dropdown-item>-->
          <el-dropdown-item command="visible">
            <i class="iconfont iconxiugaimima"></i>修改账号
          </el-dropdown-item>
          <el-dropdown-item command="signOut">
            <i class="iconfont icontuichu"></i>退出登录
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <set-password
      :visible="visible"
      :loading="loading"
      @cancel="visible = false"
      @submit="handleSave"
    >
    </set-password>
  </div>
</template>

<script>
import SetPassword from "@/components/menu/SetPassword";
import ElCanvas from "@/components/public/canvas";

export default {
  components: {
    ElCanvas,
    SetPassword
  },
  props: {
    menuOptions: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      // 修改密码弹框是否显示
      visible: false,
      activeIndex: "/project",
      count: 0,
      loading: false,
      iconList: []
    };
  },
  computed: {
    // 项目简称
    projectName() {
      const {
        projectAbbreviation,
        projectName
      } = this.$store.state.currentProjectInfo;
      return projectAbbreviation || projectName;
    },
    // 当前展示的菜单
    currentMenuList() {
      return this.menuOptions.filter(item => !item.hide);
    },
    // 菜单分割点
    divisionIndex() {
      return Math.ceil(this.currentMenuList.length / 2);
    },
    // 左侧菜单
    menuLeftList() {
      return this.currentMenuList.slice(0, this.divisionIndex);
    },
    // 右侧菜单
    menuRightList() {
      return this.currentMenuList.slice(
        this.divisionIndex,
        this.currentMenuList.length
      );
    },
    // 用户名
    userName() {
      return this.$store.state.userInfo.userName;
    }
  },
  watch: {
    $route: {
      immediate: true,
      handler: function(val, oldVal) {
        const currentPath = val.path;
        const oldPath = oldVal && oldVal.path;
        if (currentPath !== oldPath) {
          // 菜单匹配当前路由
          const hasPath = (list, pathStr) => {
            for (let i = 0; i < list.length; i++) {
              const { path, children } = list[i];
              if (path === pathStr) return true;
              if (Array.isArray(children) && children.length) {
                const childIncludes = hasPath(children, pathStr);
                if (childIncludes) return true;
              }
            }
            return false;
          };
          const hasIncludes = hasPath(this.currentMenuList, currentPath);
          this.activeIndex = hasIncludes ? currentPath : "/project";
        }
      }
    }
  },
  created() {
    this.getIconList();
  },
  methods: {
    // 获取icon图标
    getIconList() {
      try {
        /* eslint-disable */
        this.$axios.get(this.$configs.iconJson).then(res => {
          if (res && res.status === 200 && res.data) {
            const glyphs = res.data.glyphs || [];
            this.iconList = glyphs.map(item => ({
              ...item,
              iconStr: eval("'" + `\\u${item.unicode}` + "'")
            }));
          }
        });
      } catch (e) {}
    },
    // 设置icon图标
    setIcon(iconId) {
      const item = this.iconList.find(v => v.icon_id === iconId);
      return item ? item.iconStr : "";
    },
    /**
     * 设置初始选中路由
     */
    setIndex() {
      const { path } = this.$route;
      const Item = this.currentMenuList.find(item => item.id === path);
      this.activeIndex = Item ? path : "/project";
    },
    /**
     * 切换菜单
     * @param key: 当前菜单对应路由
     */
    handleSelect(key) {
      if (key !== this.activeIndex) {
        this.activeIndex = key;
        this.$router.push(key);
      }
    },
    /**
     * 设置标题弧度
     */
    handleInit(canvasEl) {
      const ctx = canvasEl.getContext("2d");
      ctx.clearRect(0, 0, 550, 30);
      // const gradient = ctx.createLinearGradient(0, 0, 550, 30);
      // gradient.addColorStop(0, '#fff');
      // gradient.addColorStop(0.13, '#fff');
      // gradient.addColorStop(0.16, 'transparent');
      // gradient.addColorStop(0.5, '#fff');
      // gradient.addColorStop(0.84, 'transparent');
      // gradient.addColorStop(0.87, '#fff');
      // gradient.addColorStop(1, '#fff');
      ctx.beginPath();
      ctx.moveTo(0, 0);
      ctx.bezierCurveTo(50, 15, 30, 30, 100, 29);
      ctx.lineTo(450, 29);
      ctx.bezierCurveTo(520, 29, 500, 15, 550, 0);
      ctx.lineWidth = 1;
      // ctx.strokeStyle = '#fff';
      ctx.stroke();
      ctx.fillStyle = "#0a1034";
      ctx.fill();

      // const ctx = canvasEl.getContext('2d');
      // ctx.beginPath();
      // ctx.moveTo(0, 0);
      // ctx.bezierCurveTo(35, 15, 20, 30, 50, 35);
      // ctx.strokeStyle = 'transparent';
      // ctx.lineWidth = 1;
      // ctx.lineTo(50, 0);
      // ctx.fillStyle = '#0a1034';
      // ctx.fill();
      // ctx.stroke();
    },
    handleCommand(type) {
      if (type === "visible") {
        this.visible = true;
        return;
      }
      this[type]();
    },
    /**
     * 修改个人信息
     */
    setUserInfo() {
      console.log("个人信息");
    },
    // 修改帐号信息
    async handleSave(data) {
      this.loading = true;
      const { success } = await this.$Model.updatePassword(data);
      this.loading = false;
      if (success) {
        this.$message.success("修改成功");
        this.$store.commit("clearUserInfo");
        this.$router.push("/login");
      }
    },
    /**
     * 退出登录
     */
    async signOut() {
      const { userId } = this.$store.state.userInfo;
      const { success } = await this.$Model.logout({
        user_id: userId
      });
      if (success) {
        this.$message.success("退出成功");
        this.$store.commit("clearUserInfo");

        this.$router.push("/login");
      }
    }
  }
};
</script>

<style scoped lang="scss">
@import "../../assets/styles/main";

.menu-comp {
  width: 100%;
  height: 50px;
  position: relative;
  padding: 0 30px;
  display: flex;
  justify-content: center;
  background-color: #0a1034;
  z-index: 10;
  .logo {
    width: 170px;
    height: 50px;
    position: absolute;
    left: 30px;
    background: url("../../assets/images/logo.png") no-repeat center;
    background-size: 100%;
    cursor: pointer;
  }
  main {
    height: 100%;
    width: calc(100% - 200px);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .menu-comp-container {
    float: left;
    &.left {
      border-image: linear-gradient(
          to right,
          transparent 0%,
          #fff 30%,
          transparent 50%
        )
        20 20;
    }
    &.right {
      border-image: linear-gradient(
          to left,
          transparent 0%,
          #fff 30%,
          transparent 50%
        )
        20 20;
    }
  }
  /deep/ .el-menu {
    background-color: transparent;
  }
  /deep/ .el-menu--horizontal {
    border-bottom-style: solid;
    border-bottom-width: 1px;
    > .el-menu-item,
    .el-submenu .el-submenu__title {
      height: 50px;
      line-height: 50px;
      color: #fff;
      padding: 0 10px;
    }
    > .el-menu-item:not(.is-disabled):focus,
    .el-menu-item:not(.is-disabled):hover,
    .el-submenu .el-submenu__title:hover {
      background-color: transparent;
      color: $mainColor;
      text-shadow: 0 1px 12px $mainColor;
    }
    > .el-submenu.is-active .el-submenu__title {
      border-bottom: 2px solid #fff;
      color: $mainColor;
      text-shadow: 0 1px 12px $mainColor;
    }
    > .el-menu-item.is-active {
      border-bottom: 2px solid #fff;
      color: $mainColor;
      text-shadow: 0 1px 12px $mainColor;
    }
    .el-menu-item:focus,
    .el-menu-item:hover {
      background-color: transparent;
    }
  }
  .project-title {
    margin: 0 10px;
    position: relative;
    height: 50px;
    text-align: center;
    line-height: 50px;
    color: #fff;
    width: 550px;
    cursor: pointer;
    .text {
      width: 100%;
      height: 80px;
      display: inline-block;
      font-size: 25px;
      font-family: cursive;
      font-weight: bold;
      line-height: 80px;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      &.active {
        color: $mainColor;
        text-shadow: 0 1px 10px $mainColor;
      }
    }
    .bg {
      width: 550px;
      height: 30px;
      display: block;
      position: absolute;
      left: 0;
      bottom: 1px;
      background: url("../../assets/images/menu_title.png") no-repeat;
      background-size: 100%;
      transform: translateY(100%);
    }
    &_left {
      /*width: 200px;*/
      /*height: 50px;*/
      position: absolute;
      top: 143px;
      left: -29px;
    }
    &_right {
      width: 50px;
      height: 30px;
      position: absolute;
      right: -29px;
      top: 43px;
      transform: rotateZ(180deg) rotateX(180deg);
    }
  }
  .user-info {
    position: absolute;
    right: 10px;
    min-width: 170px;
    max-width: 230px;
    height: 50px;
    display: flex;
    align-items: center;
    color: #fff;
    font-size: 12px;
    .message {
      width: 20px;
      height: 100%;
      display: flex;
      align-items: center;
      margin-right: 4px;
      i {
        cursor: pointer;
        transition: color 100ms;
        position: relative;
        &:hover {
          color: $mainColor;
        }
        span {
          position: absolute;
          display: inline-block;
          color: #fff;
          background-color: #e22323;
          border-radius: 10px;
          font-size: 12px;
          top: -14px;
          right: -14px;
          width: 28px;
          height: 18px;
          transform: scale(0.8);
          text-align: center;
          line-height: 18px;
        }
      }
    }
    .user-item {
      background-color: rgba(160, 164, 179, 0.4);
      padding: 2px 4px;
      border-radius: 3px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      margin: 0 2px;
      transition: color 100ms;
      &:hover {
        color: $mainColor;
      }
      i {
        font-size: 12px;
        margin-right: 3px;
      }
      .user-name {
        max-width: 50px;
        display: inline-block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
    /deep/ .el-dropdown {
      color: #fff;
    }
  }
}
@media screen and (max-width: 1500px) {
  .menu-comp {
    .el-menu-item {
      padding: 0 5px;
    }
    /deep/ .el-menu--horizontal {
      > .el-menu-item,
      .el-submenu .el-submenu__title {
        padding: 0 5px;
      }
    }
  }
}
</style>
